<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://lf9-cdn-tos.bytecdntp.com/cdn/expire-1-M/vue/3.2.30/vue.global.min.js" type="application/javascript"></script>
</head>
<body>
  
    <div id="app">
            <cp1 a="1" :b="1" @abc="fn1" ></cp1>
           
           
    </div>

        
    
    <script>  
           const { defineProps } = Vue;
           const app = Vue.createApp({  //  vue2 new Vue({})
                data(){
                    return {
                        showCp1: true
                    }
                },
                methods:{
                    fn1(res){
                        console.log('我是根组件的fn1',res)
                    }
                }
                
           })

           //    Vue.component()
           app.component('cp1',{
             template:`<div>    
                            我是cp1组件 {{ a}} {{ b }} 
                            <button @click="handleClick">触发一个abc事件</button>
                        </div>`,
             props:['a','b'],
             setup(props,ctx){
                // setup当中的this不指向组件实例自身 而是指向Window
                console.log('this in setup', this)
                console.log('props in setup', props)
                console.log('ctx', ctx)
                const handleClick = ()=>{
                    // 选项api当中的 this.$emit
                    ctx.emit('abc',777)
                }
                return {
                    handleClick
                }
            }
           })

 
           app.mount('#app') //  vue2  app.$mount()
        

    </script>

</body>
</html>